<template>
    <div v-if="visible" class="dialog-overlay">
      <div class="dialog-container">
        <div class="dialog-header">
          <h3>{{ isEdit ? '编辑餐厅信息' : '新建餐厅' }}</h3>
          <button class="close-btn" @click="$emit('close')">×</button>
        </div>
        
        <div class="dialog-content">
          <div class="form-group">
            <label>餐厅名称</label>
            <input v-model="formData.name" type="text">
          </div>
          
          <div class="form-group">
            <label>餐厅地址</label>
            <input v-model="formData.address" type="text">
          </div>
  
          <div class="form-actions">
            <button class="cancel" @click="$emit('close')">取消</button>
            <button class="confirm" @click="handleConfirm">确定</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  
  const props = defineProps({
    visible: Boolean,
    data: Object
  })
  
  const formData = ref({
    name: '',
    address: ''
  })
  
  // watch(() => props.data, (newVal) => {
  //   if(newVal) {
  //     formData.value = { ...newVal }
  //   }
  // })
  
  const handleConfirm = () => {
    // 提交表单逻辑
    emit('close')
  }
  </script>
  
  <style scoped>
  .dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .dialog-container {
    background: white;
    border-radius: 8px;
    width: 500px;
    padding: 20px;
  }
  
  .form-group {
    margin: 15px 0;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  
  .form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  </style>